import { useReducer } from "react";
import { initState, reducer } from "../store";

const UserInfo = () => {
    const [state, dispatch] = useReducer(reducer, initState);
    return (
        <ul className='list-group'>
            <li className='list-group-item'>姓名：{state.name}</li>
            <li className='list-group-item' style={{ display: "flex" }}>
                年龄：{state.age}
                <button
                    onClick={() => dispatch({ type: "ADD_AGE" })}
                    className='btn btn-xs btn-info'
                    style={{ marginLeft: "auto" }}
                >
                    增加
                </button>
            </li>
            <li className='list-group-item' style={{ display: "flex" }}>
                能量：{state.salary}
                <button
                    onClick={() => dispatch({ type: "ADD_SALARY" })}
                    className='btn btn-xs btn-danger'
                    style={{ marginLeft: "auto" }}
                >
                    增加
                </button>
            </li>
        </ul>
    );
};

export default UserInfo;
